<template>
	<view class="header-bg-image header-bg">
		<view style="height: 50rpx;"></view>
		<view class="padding-30">
			<view class="flex-between margin-top150">
				<view class="flex-alignItems-center" v-if="userinfo.id" @click="$tools.navigateTo('/pages/login/login')">
					<image class="img-160" style="border-radius: 50%;" src="../../static/image/28.png" mode=""></image>
					<view class="margin-left20">
						<view class="fontSize-15 color-000 margin-bottom30">{{userinfo.nickname}}</view>
						<view class="fontSize-13 color-999">{{phone}}</view>
					</view>
				</view>
				<view class="flex-alignItems-center" v-else @click="$tools.navigateTo('/pages/login/login')">
					<image class="img-160" style="border-radius: 50%;" src="../../static/image/28.png" mode=""></image>
					<view class="margin-left20 fontSize-15 color-000">
						登录
					</view>
				</view>
			</view>
			<template v-if="web_on == 0">
				<view class="flex-flex-warp margin-top150">
					<view class="flex-center padding-30 mine-item" v-for="(item,index) in list" :key="index"
					@click="goToUrl(item.path)"
					style="background: url('https://wudang.chunchuangkeji.cn/image/mine-bg.png') no-repeat; background-size: 100% 100%;">
						<image class="img-68 img-crisp-edges margin-right20" :src="item.image" mode=""></image>
						<view class="fontSize-15 color-704234">{{item.name}}</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="flex-flex-warp margin-top150">
					<view class="flex-center padding-30 mine-item" v-for="(item,index) in list1" :key="index"
					@click="goToUrl(item.path)"
					style="background: url('https://wudang.chunchuangkeji.cn/image/mine-bg.png') no-repeat; background-size: 100% 100%;">
						<image class="img-68 img-crisp-edges margin-right20" :src="item.image" mode=""></image>
						<view class="fontSize-15 color-704234">{{item.name}}</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{name:'我的课程',image:'../../static/image/22.png',path:'/pages/mine/mine-list/my-class'},
					{name:'会员信息',image:'../../static/image/23.png',path:'/pages/mine/mine-list/user-info'},
					{name:'我的积分',image:'../../static/image/24.png',path:'/pages/index/index-list/integral'},
					{name:'抵扣券',image:'../../static/image/25.png',path:'/pages/mine/mine-list/coupons-list'},
					{name:'订单管理',image:'../../static/image/26.png',path:'/pages/mine/order-list/order-list'},
					{name:'商城购物车',image:'../../static/image/33.png',path:'/pages/mine/mine-list/shop-cart'},
					{name:'积分购物车',image:'../../static/image/34.png',path:'/pages/mine/mine-list/points-cart'}
				],
				list1:[
					{name:'我的课程',image:'../../static/image/22.png',path:'/pages/mine/mine-list/my-class'},
					{name:'会员信息',image:'../../static/image/23.png',path:'/pages/mine/mine-list/user-info'},
					{name:'我的积分',image:'../../static/image/24.png',path:'/pages/index/index-list/integral'},
					{name:'抵扣券',image:'../../static/image/25.png',path:'/pages/mine/mine-list/coupons-list'},
					{name:'订单管理',image:'../../static/image/26.png',path:'/pages/mine/order-list/order-list'},
					{name:'我的祈福',image:'../../static/image/27.png',path:'/pages/mine/mine-list/my-prayers'},
					{name:'商城购物车',image:'../../static/image/33.png',path:'/pages/mine/mine-list/shop-cart'},
					{name:'积分购物车',image:'../../static/image/34.png',path:'/pages/mine/mine-list/points-cart'}
				],
				userinfo:{},
				phone:"",
				web_on:''
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getUserInfo()
			}
			this.getConfig()
		},
		methods: {
			goToUrl(path){
				uni.navigateTo({
					url:path
				})
			},
			async getConfig(){
				let res = await this.$http.post(this.$api.config,{},{})
				console.log(res)
				if(res.code == 1){
					this.web_on = res.data.web_on
				}
			},
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.post(this.$api.user_info, {}, {
					token: true
				})
				this.userinfo = res.data
				this.phone = this.maskPhoneNumber( res.data.mobile)
				console.log(this.phone)
			},
			// 手机号带*正则
			maskPhoneNumber(phoneNumber) {
				let reg = /(\d{3})\d{4}(\d{4})/;
				let newPhone = phoneNumber.replace(reg, "$1****$2");
			    return newPhone;
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.mine-item:nth-child(2n){
		margin-right: 0;
	}
	.mine-item{
		width: 274rpx;
		height: 100rpx;
		flex-shrink: 0;
		margin: 0 20rpx 20rpx 0;
	}
	.header-bg-image {
		width: 100%;
		min-height: 100vh;
	}
</style>